<template>
	<div id="app">
		<transition :name="transitionName">
			<!-- <keep-alive> -->
				<router-view class="view" />
			<!-- </keep-alive> -->
		</transition>

		<transition name="tabbar-fold">

			<van-tabbar route :fixed="false" :safe-area-inset-bottom="true" v-if='vanTabbarShow'>

				<van-tabbar-item replace to="/Home">
					<span>首页</span>
					<template #icon="props">
						<img :src="props.active ? myApp.srcPath('home-active.png') : myApp.srcPath('home.png')" />
					</template>
				</van-tabbar-item>

				<van-tabbar-item replace to="/Product">
					<span>交易记录</span>
					<template #icon="props">
						<img :src="props.active ? myApp.srcPath('product-active.png') : myApp.srcPath('product.png')" />
					</template>
				</van-tabbar-item>

				<van-tabbar-item replace to="/Personal">
					<span>我的</span>
					<template #icon="props">
						<img :src="props.active ? myApp.srcPath('personal-active.png') : myApp.srcPath('personal.png')" />
					</template>
				</van-tabbar-item>

			</van-tabbar>
		
		</transition>
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		Tabbar,
		TabbarItem,
	} from 'vant';

	Vue.use(Tabbar);
	Vue.use(TabbarItem);
	
	// import {PsessionId} from './serve/api.js'
	
	import axios from 'axios'


	export default {
		name: 'App',
		created(){
			
			this.PsessionId()
			
		},
		data() {

			return {

				transitionName: 'fold-left',

				active: 0,
				
				vanTabbarShow:true
			}

		},
		methods:{
			PsessionId(){
				
				axios({
					method: 'POST',
					url: this.myApp.GetDomaiName() + '/api/user/psession_id',
					dataType: 'json'
				}).then(function(res) {
					
					// console.log(res)
					// resolve(res.data)
					localStorage.setItem("Set-Cookie",res.data.msg) 
					
				}).catch(function(error) {
					
					reject(error)
					
				})
				
			}
			
		},
		watch: {
			//跳转平滑衔接 监听路由变化
			'$route'(to, from) {
				
				// console.log(this.$route.path) 查看路由地址
				
				if(this.$route.path == '/Home' || this.$route.path == '/Product' || this.$route.path == '/Personal' ){
					this.vanTabbarShow = true
				}else{
					this.vanTabbarShow = false
				}
				// console.log(this.transitionName)
				//此时假设从index页面跳转到pointList页面
				// console.log(to); // "/pointList"
				// console.log(from); // “/index”
				const routeDeep = ['/Home', '/' , '/Product', '/Personal' ,'/Withdrawal','/WithdrawalList','/Authentication','/Kefu' ,'/AnnouncementList','/MessageContent','/SetUp','/Transfer','/MyTeam','/InviteFriends','/Recharge','/TeamSet','/TeamInfo'];
				const toDepth = routeDeep.indexOf(to.path)
				const fromDepth = routeDeep.indexOf(from.path)
				this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
			}
		},
	}
</script>

<style>
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
	  -webkit-appearance: none;
	}
	input[type="number"]{
	  -moz-appearance: textfield;
	}
	
	.van-tabbar-item__icon img{
		width: 26px;
		height: 26px;
	}
	
	.van-tabbar{
		position: fixed !important;
		bottom: 0;
	}
	
	#app>first-child {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.view {
		/* background-color: yellow; */
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.fold-left-enter-active {
		animation-name: fold-left-in;
		animation-duration: .3s;
	}

	.fold-left-leave-active {
		animation-name: fold-left-out;
		animation-duration: .3s;
	}

	@keyframes fold-left-in {
		0% {
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
			/* visibility: visible; */
		}

		/*50% {
	      transform: translate3d(50%, 0, 0);
	    }*/
		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fold-left-out {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/*50% {
	      transform: translate3d(-50%, 0 , 0);
	    }*/
		100% {
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			/* visibility: hidden; */
		}
	}

	.fold-right-enter-active {
		animation-name: fold-right-in;
		animation-duration: .3s;
	}

	.fold-right-leave-active {
		animation-name: fold-right-out;
		animation-duration: .3s;
	}

	@keyframes fold-right-in {
		0% {
			width: 100%;
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			/* visibility: visible; */
		}

		/*50% {
	      transform: translate3d(50%, 0, 0);
	    }*/
		100% {
			width: 100%;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fold-right-out {
		0% {
			width: 100%;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/*50% {
	      transform: translate3d(-50%, 0 , 0);
	    }*/
		100% {
			width: 100%;
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
			/* visibility: hidden; */
		}
	}

	
	/* 底部菜单动画 */
	.tabbar-fold-enter-active {
		animation-name: tabbar-fold-in;
		animation-duration: .3s;
	}

	.tabbar-fold-leave-active {
		animation-name: tabbar-fold-out;
		animation-duration: .3s;
	}

	@keyframes tabbar-fold-in {
		0% {
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			/* visibility: visible; */
		}

		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes tabbar-fold-out {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/*50% {
	      transform: translate3d(-50%, 0 , 0);
	    }*/
		100% {
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			/* visibility: hidden; */
		}
	}

	* {
		margin: 0;
		padding: 0;
		outline: none;
		border: none;
	}
</style>
